<script setup>
import {onMounted, ref} from "vue"
import {useRouter} from "vue-router";
import { listAnyPostsByPage, toggleLikePost } from "@/api/post/post.js";
import {throttle} from "lodash";
import {format} from "timeago.js";
import {gotoUserInfo} from "@/api/toMusicInfo.js";
import HotPostList from "@/components/index/HotPostList.vue";

const router = useRouter()

const posts = ref([{
  // id: '',
  // content: '还是之前的音乐系统，首页一直是没想好写些什么，想写一个基于数据分析筛选的歌曲推荐功能，但是目前技术选型没太有考究等以后再实现吧，昨天突然想到可以把首页设计成前40%页面是歌曲推荐后面接下来就是一段匿名论坛功能，说干就干，直接构思，设计，实现。',
  // avatar: '',
  // nickname: '',
  // account: '',
  // createTime: '',
  // isNameless: true,
  // topiId: '',
  // topicTitle: '',
  // likeNum: 255,
  // commentNum: 125,
  // shareNum: 200,
  // isLike: false
}])
// 感觉在这里 选择最后一条帖子的创建时间和id都行，但是在高数据量极端情况，我认为可能会出现相同的时间，但是id肯定没有错，在自增id情况下，不可能出现id减小情况
const lastPostId = ref(2147483647)

onMounted(() => {

  checkMore()

})
function checkMore() {
  // 这个实现想想就令人兴奋，（包牛逼的）发一个请求获取5条最新的数据，然后
  listAnyPostsByPage(lastPostId.value, 5).then((res) => {
    if (lastPostId.value === 2147483647) {
      posts.value = res.data
    } else {
      posts.value.push(...res.data)
    }
    lastPostId.value = res.data[res.data.length-1].id

  })
}
function gotoDetail(id) {
  // todo 跳转到具体的帖子
  router.push({ name: 'postDetail', params: { id: id }  })
}
function gotoPost() {
  window.open( 'postPost', )

}

const toggleTheLikePost = throttle ((postId) => {
  toggleLikePost(postId, localStorage.getItem('account')).then((res) => {
    posts.value.find((item) => item.id === postId).isLike = res.data
    if (res.data) {
      // true 就是现在是喜欢状态
      posts.value.find((item) => item.id === postId).likeNum++
    } else {
      posts.value.find((item) => item.id === postId).likeNum--
    }

  })
}, 500)
</script>

<template>
  <div class="container">
    <div class="recommend-container">
      <h1>歌 曲 推 荐</h1>
      <div class="recommendSongs-container">
        <img width="224" height="224" >
        <img width="224" height="224" >
        <img width="224" height="224" >
        <img width="224" height="224" >
        <img width="224" height="224" >
      </div>
    </div>

    <div >

      <h1 style="padding-top: 35px">音乐论坛</h1>
      <div class="forum-container">
        <div class="forum-main">
          <transition-group class="posts" name="fade" tag="ul">

            <div :key="item.id" v-for="(item, index) in posts" class="post-wrap" :class="{even : index % 2 === 0}">
              <div @click="gotoDetail(item.id)" class="post">
                <div style="position: relative">
                  <img @click.stop="gotoUserInfo(router, item.account)" width="42" height="42" style="border-radius: 50%" :src="item.avatar">
                  <div style="position: absolute;left: 52px;bottom: 19px;font-family: 黑体,serif;font-size: 14px;color: #333333">
                    <span class="hover" @click.stop="gotoUserInfo(router, item.account)">{{ item.nickname }}</span>
                    <el-tag v-if="item.isNameless" style="height: 20px;position: relative;left: 15px;bottom: 3px;padding: 0 7px;color: #777777;font-size: 13px;background: #e8e8e8;border-color: #a9a9a9" effect="light" type="info">匿名</el-tag>
                  </div>
                  <span style="position: absolute;left: 52px;bottom: 3px;font-family: 黑体,serif;font-size: 13px;color: #373737">{{ format(item.createTime, 'zh_CN') }}</span>
                </div>


                <div style="font-family: 黑体,serif;width: 1060px;margin-top: 10px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 5;
                overflow: hidden;
            ">{{ item.content }}</div>

                <div style="margin-top: 30px;display: flex;gap: 1px;align-items: center">
                  <span style="font-weight: bold;" class="topic hover"># {{ item.topicTitle }}</span>
                  <i v-if="!item.isLike" @click.stop="toggleTheLikePost(item.id)" style="margin-left: auto;margin-right: 2px" class="fa-regular fa-thumbs-up"></i>
                  <i v-else @click.stop="toggleTheLikePost(item.id)" style="margin-left: auto;color: #e96161;margin-right: 2px" class="fa-solid fa-thumbs-up"></i>
                  <span>{{ item.likeNum }}条点赞</span>

                  <i style="margin-left: 10px;margin-right: 2px" class="fa-regular fa-comment-dots"></i>
                  <span>{{ item.commentNum }}条评论</span>

                  <!--                <i style="margin-left: 10px" class="fa-regular fa-star"></i>-->
                  <i style="margin-left: 10px" class="fa-regular fa-share-from-square"></i>
                </div>

                <div>

                </div>
              </div>
            </div>




            <!--        <i @click="gotoPost()" class="fa-solid fa-plus" style="color: #ffffff;"></i>-->

          </transition-group>

          <div @click="checkMore" style="margin-top: 30px" class="hover">
            查看更多
          </div>
        </div>
        <div class="forum-sidebar">
          <HotPostList />
        </div>

      </div>
    </div>

  </div>
</template>

<style scoped>
* {
  color: #333;
}
h1 {
  text-align: center;
  font-family: 微軟正黑體;
  font-size: 32px;
  cursor: default;
  padding-top: 50px;
  padding-bottom: 25px;
}
.container {
  background-color: #f5f5f5;
}
.recommend-container {
  padding: 0 355px;
  height: 532px;
  color: #333333;
  background: linear-gradient(to bottom, #f1f1f1, #f5f5ff);
}
.recommendSongs-container {
  display: flex;
  gap: 15px;
  justify-content: center;
}
i {
  font-size: 20px;
}
.forum-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding-bottom: 200px;
}
.forum-sidebar {
  width: 320px;
  margin-top: 30px;
  align-self: flex-start;
}
.forum-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;

}
.fa-plus {
  cursor: pointer;
  text-align: center;
  font-size: 30px;
  width: 30px;
  height: 30px;
  background: black;
  padding: 10px;
  border-radius: 50%;
}
.posts {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f5f5f5;
  margin: 0 auto;
  width: 1100px;
}
.post {
  width: 1100px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  font-family: 黑体,serif;
  cursor: pointer;
}
.even {
  background: linear-gradient(to bottom, #f5f5f5, #f2f2f2);
  color: #e96161;
}
.topic {
  color: #373737;
}
.post-wrap{
  opacity: 1;
  transform: translateY(20px); /* 初始状态为稍微下移 */
  transition: opacity 0.5s, transform 0.5s;
  padding: 35px 70px 30px;
  background: linear-gradient(to bottom, #f2f2f2, #f5f5f5);
}
.post-wrap:hover {
  background: #eaeaea;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s, transform 0.5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
  transform: translateY(20px); /* 离开时的状态 */
}

.fade-enter-to {
  opacity: 0;
  transform: translateY(0); /* 完全显示并恢复到原位 */
}
</style>
